Video HTML tag shows black screen in iOS safari #1408

Activity

1. atk commented on Dec 9, 2022

   

   atk

   on Dec 9, 2022

   Contributor

   More actions

   Can you try some more idiomatic code?

   import { createSignal } from "solid-js";
   
   export default function Home() {
     const [source, setSource] = createSignal();
     const getStream = () => navigator.mediaDevices.getUserMedia({
       audio: false,
       video: { facingMode: "environment" },
     }).then(setSource).catch(alert);
   
     return (
       <main>
         <Title>Video bug</Title>
         <video
           style={{border: "1px solid red"}}
           prop:srcObject={source()}
           autoplay
           muted
           playsinline
           onClick={getStream}
         />
       </main>
     );
   }

   👍React with 👍1Reacted by Afonso Oliveira

   🚀React with 🚀1Reacted by Afonso Oliveira
2. stereobooster

   added a commit that references this issue on Dec 9, 2022

   https://github.com/solidjs/solid/issues/1408\#issuecomment-1344746129

   0cdb597
3. stereobooster commented on Dec 9, 2022

   

   stereobooster

   on Dec 9, 2022

   Author

   More actions

   Same result. I've tried a lot of variations. Code was written this way to be as close as possible to baseline
4. ryansolid commented on Dec 12, 2022

   

   ryansolid

   on Dec 12, 2022

   Last edited by ryansolid

   Member

   More actions

   Hmm.. this reminds me of a webkit bug we had a while ago where the browser wasn't handling cloned elements properly. I needed to open an issue with the browser for it. Without having an iOS device it might be harder to track down and I don't have access to any iOS devices.

   Most likely culprit is Solid initializes elements via element.cloneNode. We probably want to compare direct creation document.createElement vs cloning that element to see if that is the culprit. Then we can at least follow up with the browser. To do so we should try to manually create the video element(document.createElement) and compare that to creating it and cloning it. Since it is a DOM element you should be able to insert it directly in the Solid JSX and have it work.

   This is eerily similar to that older issue be fair. This time on iOS instead of macOS: https://bugs.webkit.org/show_bug.cgi?id=222115
5. ryansolid

   added

   unverified bugBug yet to be verifiedBug yet to be verified

   on Dec 12, 2022
6. patdx commented on Feb 7, 2023

   

   patdx

   on Feb 7, 2023

   More actions

   Hi, out of curiosity I tried the link https://solidjs-ios-video-bug.netlify.app/ on iPhone 12 with iOS 16.2 (latest OS version at time of writing) and I got a real video feed.
7. ryansolid commented on Mar 10, 2023

   

   ryansolid

   on Mar 10, 2023

   Member

   More actions

   Yeah... this feels like that bug. @stereobooster can you confirm you still reproduce this on newer versions of iOS. This may just be an older bug they already fixed.
8. BelkinVadim commented on Mar 28, 2023

   

   BelkinVadim

   on Mar 28, 2023

   More actions

   it turns out for iOS 14 there is no solution to the problem?
9. ryansolid commented on Mar 30, 2023

   

   ryansolid

   on Mar 30, 2023

   Member

   More actions

   Not sure. The original issue for Mac OS they fixed in a patch version. So I'd expect if this is related it would be fixed in a later version of 14. But not sure if this is related or just the same symptoms.
10. ryansolid commented on Jun 26, 2023

    

    ryansolid

    on Jun 26, 2023

    Member

    More actions

    Closing as stale. Reopen if needed.
11. ryansolid

    closed this as not plannedon Jun 26, 2023
12. linkthai commented on Nov 25, 2024

    

    linkthai

    on Nov 25, 2024

    More actions

    Can confirm this problem exists on even the latest version iOS 14. I bandaged it by creating <video/> programmatically instead.

    import { onMount } from 'solid-js';
    import { useScan } from './ScanContext';
    import './scan.scss';
    
    export function ScanVideo() {
      const { initScan } = useScan();
    
      onMount(async () => {
        const videoWrapper = document.getElementById('video-wrapper');
        if (videoWrapper) {
          const videoElement = document.createElement('video');
          videoElement.id = 'scanner';
          videoElement.className = `w-full h-full`;
          videoElement.muted = true;
          videoElement.setAttribute('playsinline', '');
          videoElement.setAttribute('webkit-playsinline', '');
          videoElement.poster = 'none';
          videoWrapper.appendChild(videoElement);
    
          initScan(videoElement);
        }
      });
    
      return <div id="video-wrapper" class="h-full w-full"></div>;
    }